<template>
    <div class="banner">
        <div class="herder-box">
            <h2>操作日志</h2>
            <hr>
            <div class="header">
                <div class="inp">
                    <span>操作人</span> &emsp;
                    <el-input v-model="textarea" :rows="1"  placeholder="请输入" class="inpt" />
                </div>
                <div class="inpfoot">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>
        </div>
        <div class="table-box">
            <div class="tableheader">
                <span>操作记录</span>
                <div>
                    <el-button>导出</el-button>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange" class="table">
                <el-table-column type="selection" width="55" />
                <el-table-column label="操作时间" width="120">
                    <template #default="scope">
                        {{ scope.row.date }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="操作人" width="120" />
                <el-table-column prop="address" label="操作模块" show-overflow-tooltip />
                <el-table-column prop="address" label="操作内容" show-overflow-tooltip />
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
//实例化useRouter
var router = useRouter()
var textarea = ref('')
var tableData = ref([])
const handleSelectionChange = () => {
  
}
const tobanone = ()=>{
    router.push('/index/Roleone')
}
</script>
<style scoped>
.herder-box{
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.307);
    height: 150px;
}
.header{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    /* background-color: hotpink; */
}
.inp{
    display: flex;
    /* 是内部元素垂直居中 */
    align-items:center;  
    /* 使内部元素水平居中 */
    /* justify-content:center; */
}
.inpt{
    width: 200px;
}
.table-box {
    margin-top: 20px;

}
.tableheader{
    display: flex;
    justify-content: space-between;
    align-items:center; 
}
.table{
    margin-top: 20px;
}
</style>